<template>
<div class="login">
    <!-- 头部  头像 -->
    <div class="header">
        <div>
            <router-link to="/personal"><&lt;返回</router-link>
        </div>
        <div>
            <span>欢迎登录</span>
           <div><img :src="login.img" alt=""></div>
            <span>{{username}}</span>
            <!--<span></span>-->
        </div>
    </div>
    <form action="" method="post">
        <!--手机号  密码 -->
        <div class="input">
            <div>
                <i class="iconfont icon-user"></i>
                <input @blur="person" @focus="personal" v-model="per" type="text" name="user" placeholder="请输入用户名">
            </div>
            <div class="show"><span v-show="is_show">{{text1}}</span></div>
            <div>
                <i class="iconfont icon-mima"></i>
                <input type="password" @click="word" @blur="Bword" name="pwd"  v-model="pas" placeholder="请输入密码">
            </div>
            <div>
                <div class="show"><span v-show="is_hide">{{text2}}</span></div>
                <router-link to="">忘记密码？请点击>></router-link>
            </div>
        </div>
        <!-- 登录  注册 -->
        <div class="denglu">
            <input type="submit" @click.prevent="log" value="登录">
            <router-link class="reg" to="/register">注册</router-link>
            <router-link to="/home">随便逛逛 >></router-link>
        </div>
    </form>
    <!-- 第三方 -->
    <div class="End">
        <div>————使用第三方账号登录————</div>
        <div>
            <router-link to=""><i class="iconfont icon-qq"></i></router-link>
            <router-link to=""><i class="iconfont icon-3-copy"></i></router-link>
            <router-link to=""><i class="iconfont icon-weibo"></i></router-link>
        </div>
    </div>
</div>
</template>
<style scoped src="../../public/css/login.css"></style>
<script>
    export default {
        data(){
            return {
                login:"",
                //  控制用户名提示显示隐藏
                is_show:false,
                //  控制密码提示显示隐藏
                is_hide:false,
                //  用户名value
                per:'',
                //  密码value
                pas:'',
                //  用户名提示内容
                text1:'请输入6-10由数字字母下划线组成的用户名',
                //  密码提示内容
                text2:'请输入6位数字密码',
                username:"",
            }
        },
        methods:{
            //  用户聚焦
            personal(){
                if (this.per==""){
                    this.is_show=true;
                }
            },
            //  用户输入失焦
            person(){
                //  6-10位数字字母下划线正则
                let reg=/^\w{6,10}$/ig;
                if (this.per=="") {
                    //  提示文本显示
                    this.username='';
                    this.is_show=true;
                    this.text1='用户名为空'
                }else {
                    if (reg.test(this.per)){
                        this.username='';
                        //  满足正则，发起请求服务器对比是否存在该用户
                        this.$axios.post('http://118.178.85.166:3000/login',{username:this.per,met:1}).then((data)=>{
                            //  全部数据
                            let Data=data.data;
                            if (Data.code==300){
                                this.is_show=true;
                                this.text1=Data.msg
                            }else {
                                //  满足正则，提示文本消失
                                this.is_show=false;
                                this.username=this.per;
                            }
                        }).catch((err)=>{
                            console.log('这是login.vue中的错误:'+err);
                        });

                    } else {
                        this.username='';
                        //  提示文本显示
                        this.is_show=true;
                        this.text1='请输入6-10由数字字母下划线组成的用户名'
                    }
                }
            },
            //  密码聚焦
            word(){
                this.is_hide=false;
              this.text2='';
            },
            //  密码失焦
            Bword(){
                if (this.pas==''){
                    this.is_hide=true;
                    this.text2='密码为空';
                }
            },
            //  点击登录按钮
            log(){
                if (this.per==''){
                    this.is_show=true;
                    this.text1='用户名为空'
                } else if (this.pas==''){
                    this.is_hide=true;
                    this.text2='密码为空'
                } else if (this.is_show==false&&this.is_hide==false) {
                    this.$axios.post('http://118.178.85.166:3000/login',{username:this.per,password:this.pas,met:0}).then((data)=>{
                        //  全部数据
                        let Data=data.data;
                        if (Data.code==300){
                            this.is_hide=true;
                            this.text2=Data.msg;
                            this.pas='';
                        }else {
                            this.is_show=false;
                            //  弹出登录成功
                            alert(Data.msg);
                            //  设置本地存储user为当前输入的用户名
                            localStorage.setItem('user',this.per);
                            //  购物车数据为空
                                //  传入当前用户购物车数据
                                localStorage.setItem('list',Data.list||'[]');
                                //  传入当前用户已付款数据
                                localStorage.setItem('paid',Data.paid||'[]');
                            this.$store.state.list=JSON.parse(localStorage.getItem('list'));
                            this.$store.state.paid=JSON.parse(localStorage.getItem('paid'));
                            //  跳转转首页
                            this.$router.push('/home')
                        }
                    }).catch((err)=>{
                        console.log('这是点击登陆按钮中的错误:'+err);
                    });
                }

            }
        },
        mounted(){
            this.$axios.get('http://118.178.85.166:3000/login').then((data)=>{
                //  全部数据
                let Data=data.data[0];
                //  用户头像
                this.login=JSON.parse(Data.login)
            }).catch((err)=>{
                console.log('这是journey.vue中的错误:'+err);
            });
        }
    }
</script>
